import React from 'react'
import { Button, Input, Row, Col, Form } from 'antd'
const Search = Input.Search;
import ExpenseTypeSelector from 'components/template/expense-type-selector'
import SlideFrame from 'components/slide-frame'
const FormItem = Form.Item;

export default {
  key: 'expense-type-selector',
  name: 'ExpenseTypeSelector 费用类型选择',
  author: 'ZaraNengap',
  description: '可以根据模式选择费用类型。',
  isExampleFull: true,
  api: [
    {
      title: 'API',
      data: [{
        param: 'source', description: '必填，指定费用类型源，为::company::、::form::(弃用)、::formv2::中的一种。', type: 'string', defaultValue: '-'
      },{
        param: 'param', description: '对应::source::所需要的参数。', type: 'any', defaultValue: '-'
      },{
        param: 'single', description: '是否单选。', type: 'boolean', defaultValue: 'true'
      },{
        param: 'value', description: '已选择的费用类型，可以是数组。', type: 'object|array', defaultValue: '-'
      },{
        param: 'onSelect', description: '选择一项时触发的回调。', type: 'function(result)', defaultValue: '-'
      },{
        param: 'filter', description: '界面中费用类型的筛选方法，只有返回true才显示。', type: 'function(expenseType)', defaultValue: '() => true'
      }],
      description: ''
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '直接可渲染出一个费用类型选择列表，通过::source::判断数据源。',
      state: {

      },
      getMethod: context => {
        return {
          handleSelectExpenseType: value => {
            console.log(value)
          }
        }
      },
      getContent: context => {
        const {  } = context.state;
        return (
          <div>
            <ExpenseTypeSelector source="company"
                                 param={context.props.company.companyOID}
                                 onSelect={context.handleSelectExpenseType}/>
          </div>
        )
      }
    },
    {
      title: '使用场景',
      description: '一般与::SlideFrame::或::Modal::一起使用。',
      state: {
        showSlideFrame: false,
        expenseType: {
          name: ''
        }
      },
      getMethod: context => {
        return {
          handleSelectExpenseType: expenseType => {
            context.setState({ showSlideFrame: false, expenseType });
            console.log(expenseType)
          }
        }
      },
      getContent: context => {
        const { showSlideFrame, expenseType } = context.state;
        return (
          <div>
            选择的费用类型: {expenseType.name}<br/>
            <Button type="primary"
                    style={{ marginTop: 12 }}
                    onClick={() => context.setState({ showSlideFrame: true })}>选择费用类型</Button>
            <SlideFrame content={ExpenseTypeSelector} show={showSlideFrame}
                        onClose={() => context.setState({ showSlideFrame: false })}
                        params={{
                          source: 'company',
                          param: context.props.company.companyOID,
                          onSelect: context.handleSelectExpenseType
                        }}
                        value={expenseType}/>
          </div>
        )
      }
    }
  ]
}
